<template>
	<div class="login">
		<van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
		<!-- 右上角 -->
		<van-row class="row1">
			<van-col span="8"></van-col>
			<van-col span="8"></van-col>
			<van-col span="8"><router-link to="/home">游客试用 >>></router-link> </van-col>
		</van-row>

		<!-- logo -->
		<van-row class="row2">
			<van-col span="9"></van-col>
			<van-col span="7">
				<van-image
				width="100"
				src="https://img.zcool.cn/community/012a4c5d724c27a801202f17b8dbd9.png@1280w_1l_2o_100sh.png"
				/>
				<!-- 猫图 -->
				<!-- src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" -->
				<!-- wyy图标1 -->
				<!-- https://img.zcool.cn/community/012a4c5d724c27a801202f17b8dbd9.png@1280w_1l_2o_100sh.png -->
				<!-- wyy图标2 -->
				<!-- https://pic.rmb.bdstatic.com/bjh/news/c513a0a5d6f34a5521ee4360efc78eb0.png -->
			</van-col>
			<van-col span="8"></van-col>
		</van-row>

		<van-row class="row3">
			<van-col span="3"></van-col>
			<van-col class="col2" span="18"><router-link to="/login/phonelogin">手机号登录</router-link></van-col>
			<van-col span="3"></van-col>
		</van-row>

		<van-row class="row4">
			<van-col span="3"></van-col>
			<van-col class="col2" span="18"><router-link to="/login/register">注册</router-link></van-col>
			<van-col span="3"></van-col>
		</van-row>


		<van-row class="row5">
			<van-col span="9"></van-col>
			<van-col span="6"><router-link to="/login/userlogin">密码登录</router-link></van-col>
			<van-col span="9"></van-col>
		</van-row>

		<!-- 底部 -->
		<van-row class="row6">
			<van-col span="5"></van-col>
			<van-col span="7" @click="showPopup1">登录遇到问题 |</van-col>
			<van-col span="7" @click="showShare = true">其他登录方式 ></van-col>
			<van-col span="5"></van-col>
		</van-row>

		<!-- // 左下弹窗 登录时问题 -->
		<van-popup v-model:show="show1" position="bottom" :style="{ height: '30%' }" round >
			<van-cell title="登陆时遇到问题" value="" />
			<van-cell  title="手机号已更换" value="" />
			<van-cell title="找回原账号" value="" />
			<van-cell title="其他问题" value="" />
		</van-popup>
		<!-- // 右下弹窗 其他登录方式 -->
		<van-share-sheet
		v-model:show="showShare"
		:options="options"
		title="其他登录方式"
		/>
		</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const onClickLeft = () => {
	history.back()
}

// 左下弹窗 登录时问题
const show1 = ref(false);
    const showPopup1 = () => {
      show1.value = true;
}

// 右下弹窗 其他登录方式
const showShare = ref(false);
    const options = [
		{ name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
		{ name: '二维码', icon: 'qrcode' },
]
</script>

<style lang="scss" scoped>
.login {
	height: 100vh;
	background: linear-gradient(to bottom, white, rgb(245, 227, 227), rgb(239, 239, 239),rgb(239, 239, 239));
	// text-align: center;
	font-size: 0.4rem;
	position: relative;
	.row1,.row5,.row6{
		.van-col{
			font-weight: bold;
			color: gray;
		}
	}
	.row3,.row4{
		color: rgb(238, 87, 87);
		margin-bottom: 0.3rem;
		text-align: center;
		.col2{
			height: 1.2rem;
			line-height: 1.2rem;
			font-size: 0.5rem;
			font-weight: bold;
			border: 2px solid rgb(243, 72, 72);
			border-radius: 0.6rem;
		}

	}
	.row2{
		margin-top: 2rem;
		margin-bottom: 1.5rem;
		
	}
	.row5{
		text-align: center;
		margin-top: 0.5rem;
	}
	.row6{
		width: 100%;
		font-size: 0.4rem;
		position: absolute;
		bottom: 4rem;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.van-popup{
		.van-cell{
			text-align: left;
		}
	}
}
</style>
